<template>
    <view style="background-color: #FFFFFF;width: 100%;">
        <!-- <view class="navBar">
            <view class="navBar-search">
                    <image src="../../static/search.png" mode="widthFix" style="width: 34rpx;"></image>
                    <input type="text" v-model="search" confirm-type="search" @confirm="getSearch" placeholder="华为P30 Pro" placeholder-style="font-size:30rpx;color:#B5B9BF"/>
            </view>
        </view> -->
        <view class="flex-content">
            <view class="end-title">
                 <view v-for="(item,index) in items" :key="index" :class="{btna:count == index}" @tap="change(index)">
                    {{item}}
                 </view>
            </view>
            <view class="end-cont">
                    <!-- <image src="../../static/fenlei1.png" mode="widthFix" style="width: 530rpx"></image> -->
                    <view class="title">{{goodsList.flName}}</view>
                    <view class="goods">
                        <view class="goods-item" v-for="(item,index) in goodsList.children" :key="index" @click="bindShopDetails(item.id)">
							<view class="imgBox">
								<image :src="imgUrl+item.spImage" mode="widthFix" style="width: 100%;height: 80rpx!important;"></image>
							</view>
							<text class="spName">{{item.spName}}</text>
                            <div class="goodsBox">
								<text class="price">{{item.price}}</text>
								<image src="../../static/img/jia.png" class="jia"></image>
							</div>
                        </view>
                    </view>
            </view>
        </view>
    </view>
</template>
<script>
	import { spList } from '@/api/shop.js'
	import config from '@/config'
    export default{
        data() {
           return {
			  imgUrl:config.baseUrl,
              btnnum: 0,
              items:[],
              count:"",
              search:"",
              goodsList:{},
			  list:[],
			  index:0,
            
          };
        },
        // onShow() {
        //     this.goodsList=this.data[0]
        // },
		onLoad: function(options) {
			this.pId = options.id
			this.getList()
			// this.goodsList=this.data[0]
		},
        methods:{
			getList(){
				let data = {
					  id :this.pId
				}
				spList(data).then((res) => {
					if(res.code==200){
						// this.list = res.data
						let data = res.data
						// 遍历成children结构
						let newObj = {}
							data.forEach((item, index) => {
							  // 解构出每一个对象里面flName字段的值
							  let { flName } = item
							  let { flId } = item
							  // 如果在这个新对象里面没有找到，则新增一个对象
							  if (!newObj[flName]) {
								// 重构对象
								newObj[flName] = {
								  flName,
								  flId,
								  children: [],
								}
							  }
							  // 如果在对象里面找到有相同的 flName 字段的值，则Push进入children里面
							  newObj[flName].children.push(item)
							})
							this.list = Object.values(newObj)
							this.goodsList = this.list[this.index]
							for (let i = 0; i < this.list.length; i++) {
								this.items.push(this.list[i].flName);
							} 
					}
				  })
			},
          change(e) {
			  console.log('222',e)
             this.count = e
             this.btnnum = e
             this.goodsList=this.list[e]//这里data是获取到的右侧商品数据
             console.log(this.goodsList)
             // console.log(this.count)
          },
		  bindShopDetails(id){
			  uni.navigateTo({
			  	url: '/pages/shop/shopDetails?id='+id,
			    });
		  },
          scroll(){},
          getSearch(){}
        }
    }
</script>

<style lang="scss" scoped>
    .navBar{
        padding:5rpx 32rpx 6rpx 28rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        &-search{
            margin: 0 auto;
            width: 690rpx;
            height:58rpx;
            background-color: #F8F9FA;
            border-radius:30rpx;
            padding-left: 16rpx;
            // margin-right: 32rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            input{
                margin-left: 20rpx;
            }
        }
    }
    .flex-content{
        display: flex;
    }
    .end-title{
        display:flex;
        flex-direction: column;
        width: 180rpx;
        background-color: #F3F5F7;
		position: fixed;
        view{
            height: 105rpx;
            line-height: 105rpx;
            text-align: center;
            font-size:26rpx;
            // font-weight: bold;
            color: #4E5152;
            border-bottom: 1rpx solid #ECEDEE;
            border-left: 8rpx solid #F3F5F7;
        }
        .btna{
            color:#6a8473;
            background-color:#FFFFFF;
            border-left: 4rpx solid #6a8473;
            }
    }
	
	.goodsBox{
		width: 100%;
		position: absolute;
		bottom: 2rpx;
	}
	
	.goodsBox text{
		color: #6a8473;
	}
	
	.jia{
		width: 40rpx;
		height: 40rpx;
		margin: 0!important;
		float: right;
	}
	
	.imgBox{
		width:100%;
	}
	
	.imgBox image{
		width: 100%;
		height: 204rpx!important;
	}
	
	.spName{
		display: -webkit-box;             /* 必须设置，用于多行溢出 */	   -webkit-box-orient: vertical;     /* 设置盒子排列方向为垂直 */	   -webkit-line-clamp: 2;            /* 限制显示的行数，例如显示 3 行 */	   overflow: hidden;                 /* 隐藏超出的内容 */	   width: 200px;  
	}
    /* .end-title view{flex-grow:1;text-align:center;} */
	
    .end-cont{
        width: 550rpx;
		position: absolute;
		right: 10rpx;
        // display:none;
        // padding:20rpx 22rpx 0 22rpx ;
        .title{
            font-size: 30rpx;
            font-weight: bold;
            // text-align: center;
            color:#4E5152;
			position: fixed;
			top: 0;
			height: 47rpx;
			background-color: #fff;
			width: 100%;
        }
        .goods{
            // font-size: 10rpx;
            width: 100%;
			margin-top: 52rpx;
            // display: flex;
            // justify-content:space-around;
            // flex-wrap: wrap;
            // flex-wrap: nowrap;
            &-item{
                width: 47%;
				height: 336rpx;
                // display: flex;
                // align-items: center;
                // flex-direction: column;
				float: left;
				margin: 10rpx 7rpx;
				border: 1px solid #6a8473;
				position: relative;
                text{
					padding: 0 10rpx;
                    font-size: 24rpx;
                    width: 90rpx;
					text-align: left;
					margin-top: 10rpx;
					width:93%;
                }
            }
        }
        // image{
        //     margin: 20rpx 0 60rpx 20rpx;
        // }
    }
    
    .dis{display:block;}
</style>